<template>
    <section>
		<nav class="bottom-menu">
		<a @click="index"><div class="bottom-menu-item"><img  :src="url1"><span >猜你喜欢</span></div></a>
		<a @click="category"><div class="bottom-menu-item"><img :src="url2"><span >分类</span></div></a>
		<a @click="user"><div class="bottom-menu-item"><img :src="url3"><span >用户中心</span></div></a>
		</nav>
	</section>
</template>

<script>
    export default {
        name: "Buttom",
      props: {
        present: {
          type: String,
          default: "index"
        }
    },
      methods: {
          index(){
            this.$router.push("/index")
          },
        category(){
          this.$router.push("/filter")
        }
      },
      data(){
          return {
            url1: "./static/button_icon/home.png",
            url2: "./static/button_icon/category.png",
            url3: "./static/button_icon/user.png"
          }
      },
      created(){
           if (this.present=="index"){
             this.url1="./static/button_icon/favor.png"
           } else if (this.present == "search"){
              this.url2="./static/button_icon/fenlei1.png"
           } else{
              this.url3= "./static/button_icon/users.png"
           }
      }
    }
</script>

<style scoped lang="less">
@unit : 25; //750 时的标准
@fontSize: 0.48rem; //通用的大小
*{
  margin: 0px;
  padding: 0px;
}
.bottom-menu{
    position: fixed;
    bottom: 0;
    height: 2rem;
    display:flex;//启动flex布局
     flex-wrap: nowrap;//不换行
    background-color: white;
    width:100%;//流式布局
    justify-content: center;
    a{
        text-decoration: none;
    }
    .bottom-menu-item{

        width: 3rem;
        height: 100%;
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        display:flex;
        flex-wrap: nowrap;
        flex-direction: column;//y轴为主轴
        align-items: center;
        justify-content: center;
        img{
            width:1rem;
            height:1rem;
        }
        span{
            color: black;
            font-size: @fontSize;
            font-weight: bold;
        }
    }
}

</style>
